<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--@elvariable id="contextPath" type="java.lang.String"--%>
<%--@elvariable id="topics" type="java.util.List<org.parademo.web.model.ProposalFormView>"--%>
<form:form action="${contextPath}/proposals?create" method="POST" commandName="proposal" class="createProposalForm" id="createProposalForm" >
    <link rel="stylesheet" href="${contextPath}/static/jquery-ui-1.8.10/css/smoothness/jquery-ui-1.8.10.custom.css" />

    <script type="text/javascript" src="${contextPath}/static/jquery/jquery-1.5.1.js"></script>
    <script type="text/javascript" src="${contextPath}/static/jquery-ui-1.8.10/development-bundle/ui/jquery-ui-1.8.10.custom.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#votingEndDate").datepicker({
                dateFormat: 'dd-mm-yy',
                appendText: ' (dd-mm-yy)',
                gotoCurrent: true,
                changeMonth: true,
                changeYear: true,
                buttonImageOnly: true,
                minDate: new Date()
            });
          });
    </script>

    <h1>${title}</h1>

    <table>
        <tr>
            <td>
                <label for="title">Title (*)</label>
            </td>
            <td>
                <form:input path="title" id="title" />
                <form:errors path="title" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="topics">Category/Topic (*)</label>
            </td>
            <td>
                <form:select id="topics" path="topicId">
                    <form:option value="0" label="-- Choose a topic --" />
                    <form:options items="${topics}" itemLabel="name" itemValue="id" />
                </form:select>
                <form:errors path="topicId" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="votingEndDate">Voting end date (*)</label>
            </td>
            <td>
                <form:input path="votingEndDate" id="votingEndDate" />
                <form:errors path="votingEndDate" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="description">Detail (*)</label>
            </td>
            <td>
                <form:textarea path="description" id="description" cols="40" rows="10" />
                <form:errors path="description" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="status">Status</label>
            </td>
            <td>
                todo: CREATED
            </td>
        </tr>
    </table>

    <div>
        <a class="medium black button" href="javascript:" onclick="document.getElementById('createProposalForm').submit();">Create Proposal</a>
        <a class="medium red button" href="${contextPath}/my-proposals">Cancel</a>
    </div>
</form:form>

